import React from 'react';
import {inject, observer} from 'mobx-react';
import * as mobx from 'mobx';
import {WeaLocaleProvider, WeaTable, WeaTools} from "ecCom";

const getLabel = WeaLocaleProvider.getLabel;
const Base64 = WeaTools.Base64;

export default class Main extends React.Component {
    constructor(props) {
        super(props);
    }

    renderDetailTable2(tableData) {
        let {data, columns} = tableData;      //data，表格数据，columns，列信息

        data = data.map((item1, index1) => {
            const rowData = {};
            columns.map(item2 => {
                const {fieldId, fieldName, fieldLabel} = item2;
                const fieldData = item1[fieldId];

                if (!!fieldData) {
                    let {showName1="", showName2="", isBase64} = fieldData;

                    if (isBase64) {
                        if (!!showName1) {
                            showName1 = Base64.decode(showName1);
                        }

                        if (!!showName2) {
                            showName2 = Base64.decode(showName2);
                        }
                    }
                    let showcontenct = "";
                    if(!!showName2){
                        showcontenct += '<div class="fieldValue" >'+showName2+'</div>';
                    }

                    if(!!showName1){
                        showcontenct += '<div class="fieldValue red">'+showName1+'</div>';
                    }
                    let showName = (<div dangerouslySetInnerHTML={{__html: showcontenct}}></div>);

                    rowData[fieldName] = showName;
                } else {
                    rowData[fieldName] = "";
                }
            });

            return rowData;
        });

        columns = columns.map(item => {
            const {fieldName, fieldLabel} = item;
            return {
                title: fieldLabel,
                dataIndex: fieldName,
                key: fieldName
            };
        });

        return <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@fa4ava`} columns={columns} dataSource={data} pagination={false}/>
    }


    renderDetailTable1(tableData) {
        let {data, columns} = tableData;      //data，表格数据，columns，列信息

        data = data.map((item1, index1) => {
            const rowData = {};
            columns.map(item2 => {
                const {fieldId, fieldName, fieldLabel} = item2;
                const fieldData = item1[fieldId];

                if (!!fieldData) {
                    let {showName, isBase64} = fieldData;

                    if (isBase64) {
                        if (!!showName) {
                            showName = Base64.decode(showName);
                        }
                    }

                    rowData[fieldName] = (
                        <div className="fieldValue" dangerouslySetInnerHTML={{__html: showName}}></div>
                    );
                } else {
                    rowData[fieldName] = "";
                }
            });

            return rowData;
        });

        columns = columns.map(item => {
            const {fieldName, fieldLabel} = item;
            return {
                title: fieldLabel,
                dataIndex: fieldName,
                key: fieldName
            };
        });

        return <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@flu8m9`} columns={columns} dataSource={data} pagination={false}/>
    }

    renderTables(datas, tables, checkResult) {
        return tables.map(item => {
            const {tableId, tableName} = item;

            if ([tableId] in datas) {
                return (
                    <div className="detailTalbe">
                        <div className="tableTitle">{tableName}：</div>
                        {checkResult === "2" ? this.renderDetailTable2(datas[tableId]) : this.renderDetailTable1(datas[tableId])}
                    </div>
                );
            } else {
                return null;
            }
        });
    }

    render() {
        const {datas, tables, checkResult} = this.props;
        return (
            <div className="detailFieldLogs">
                {this.renderTables(datas, tables, checkResult)}
            </div>
        );
    }
}